<template>
	<view class="detail-wrap ">
		<view class="detail_box">
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper borderRadius="0" indicator-pos="bottomRight" mode="number"
					:height="750"
					:list="goodsInfo.images"
					:interval="3000"
					@click="onGoodsSwiper">
				</u-swiper>

				<!-- 价格卡片组 -->
				<sh-price-card :detail="goodsInfo"></sh-price-card>

				<!-- 标题 -->
				<view class="u-m-b-10 title-box u-p-20 u-skeleton-fillet">
					<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.title }}</view>
					<view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view>
				</view>

				<!-- 套餐内容 -->
				<view class="tab-box u-flex">
					<view class="tab-item u-flex-col u-row-center u-col-left u-p-20 u-m-b-10">
						<view class="tab-title">套餐内容</view>
					</view>
				</view>
				
				
				<view class="tab-detail u-p-20 u-m-b-10">
					
					<block v-for="(item, index) in goodsInfo.goods_info">
						
						<view class="item-combo" v-if="item.goods_detail.is_sku==1">
							<view class="pro-combo">
								<view class="left">
									<view class="img"><image :src="item.goods_detail.image" mode="widthFix"></image></view>
								</view>
								<view class="right">
									<view class="pro-title">{{item.goods_detail.title}}</view>
									<view class="pro-price">￥ {{item.goods_detail.price}}</view>
									<view class="pro-num">数量： {{item.number}}</view>
								</view>
							</view>	
							
							<view class="num-select-list">
								<view v-for="goodsnoidx in item.number">
									<div class="item-pro-select" @click="goSkuBox(item.goods_detail, goodsnoidx - 1)">
										<text class="text">选择第{{ goodsnoidx }}件规格:</text>
										<text class="text">{{ selectedSkuPriceText[item.id + '-' + (goodsnoidx - 1)] || '请选择' }}</text>
									</div>
								</view>
							</view>
						</view>
						
					</block>
					
					<block v-for="(item, index) in goodsInfo.goods_info">
						<view class="item-combo" v-if="item.goods_detail.is_sku==0">
							<view class="pro-combo">
								<view class="left">
								   <view class="img"><image :src="item.goods_detail.image" mode="widthFix"></image></view>
								</view>
								
								<view class="right">
									<view class="pro-title">{{item.goods_detail.title}}</view>
									<view class="pro-price">￥ {{item.goods_detail.price}}</view>
									<view class="pro-num">数量： {{item.number}}</view>
								</view>
							</view>
						</view>
					</block>	

					<block v-for="(item, index) in goodsInfo.card_info">
						<view class="card-combo">
							<view class="left">
								<view class="card-title">{{item.card_detail.name}}</view>
							</view>
							<view class="right">
								<text class="card-money">￥ {{item.card_detail.amount}}</text>
								<view class="card-num">数量： {{item.number}}</view>
							</view>
						</view>
					</block>
				</view>

				<!-- 套餐详情 -->
				<view class="tab-box u-flex">
					<view class="tab-item u-flex-col u-row-center u-col-left u-p-20 u-m-b-10">
						<view class="tab-title">套餐详情</view>
					</view>
				</view>
				<view class="tab-detail u-p-20 u-m-b-10">
					<!-- 详情富文本 -->
					<view class="rich-box">
						<u-parse :html="goodsInfo.content"></u-parse>
					</view>
				</view>
			</view>

			<!-- 商品foot -->
			<view class="tabbar-foot safe-area-inset-bottom" v-if="goodsInfo.id">
				<view class="detail-foot_box safe-area-inset-bottom  u-flex">
					<!-- foot左侧 -->
					
					<view class="detail-left">
						<view class="comb-price"><text class="unit">￥</text><text class="money">{{  goodsInfo.price }}</text></view>
						<view class="tips-price">套餐优惠价</view>
						
					</view>
					<!-- foot右侧 -->
					<view class="detail-right">
						<view>
							<view class="detail-btn-box u-flex u-row-around">
								<button class=" u-reset-button tool-btn pay-btn" @tap="gotoPreorder">立即购买</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 规格弹窗 -->
			<sku v-if="showSku" v-model="showSku" :goodsInfo="currentSkuGoods"
				@changeType="changeType"
				@getSkuText="getSkuText"
				@getSelectedSku="getSelectedSku"></sku>

			<!-- 登录 -->
			<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import shPriceCard from '../components/sh-price-card.vue';
	import sku from './sku.vue';

	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			shPriceCard,
			sku
		},
		data() {
			return {
				showSku: false, //是否显示规格弹窗
			
				goodsInfo: {},
				goodsSkuList: [],

				swiperCurrent: 0, //轮播下标

				currentSkuGoods: null,
				currentSkuGoodsIdx: 0,
				currentSkuList: null,

				selectedSku: {},
				selectedSkuPrice: {},
				selectedSkuPriceText: {},
			};
		},
		// 是否登录
		computed: {
			...mapState({
				isLogin: ({
					user
				}) => user.isLogin,
				authType: ({
					user
				}) => user.authType
			}),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onLoad() {
			let that = this;
			this.getComboDetail()
		},

		methods: {
			// 轮播图预览
			onGoodsSwiper(e) {
				this.$tools.previewImage(this.goodsInfo.images, e);
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({path: path, query: parmas})
			},
			// 套餐详情
			getComboDetail() {
				let that = this;
				that.$http('goods.combodetail', {id: that.$Route.query.id}, '', false).then(res => {
					if (res.code === 1) {
						that.showEmpty = false;
						that.goodsInfo = res.data;
						res.data.goods_info.forEach((goods) => {
							if (goods.goods_detail.is_sku) {
								for (let i = 0; i < goods.number; i++) {
									that.goodsSkuList.push({
										goods_id: parseInt(goods.id),
										idx: i,
										sku: goods.goods_detail.sku,
										sku_price: goods.goods_detail.sku_price
									})
								}
							}
						})
						
					}
				})
			},

			// 选择规格
			goSkuBox(goods, idx) {
				var that =this
				that.showSku = true;
				that.currentSkuGoods = goods;
				that.currentSkuGoodsIdx = idx;
				that.goodsSkuList.forEach((item) => {
					if (item.goods_id == goods.id && item.idx == idx) {
						that.currentSkuList = item
					}
				})
			},
			getSelectedSku(e) {
				let selected = e
				let goods_idx_key = this.currentSkuGoods.id + '-' + this.currentSkuGoodsIdx
				if (selected.sku_price_id) {
					this.selectedSkuPrice[goods_idx_key] = selected.sku_price_id
					this.selectedSkuPriceText[goods_idx_key] = selected.goods_sku_text.join(',')
				}
			},
			getSelectedSkuddd(pid, id) {
				let that = this
				that.goodsSkuList.forEach((item, i) => {
					if (item.goods_id == that.currentSkuGoods.id && item.idx == that.currentSkuGoodsIdx) {
						that.goodsSkuList[i]['sku'].forEach((sitem, si) => {
							that.goodsSkuList[i]['sku'][si]['content'].forEach((citem, ci) => {
								if (citem.pid == pid) {
									if (citem.id == id) {
										that.goodsSkuList[i]['sku'][si]['content'][ci]['active'] = true
									} else {
										that.goodsSkuList[i]['sku'][si]['content'][ci]['active'] = false
									}
								}
							})
						})
						that.currentSkuList = that.goodsSkuList[i]
					}
				})
			},

			// 立即购买
			gotoPreorder() {
				if (this.isLogin) {
					if (this.checkComboSkuChoose()) {
						this.jump('/pages/goods/combo/preorder', {
							goods_id: this.goodsInfo.id,
							sku_price: this.selectedSkuPrice
						})
						return
					}
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			checkComboSkuChoose() {
				let counter = 0;
				for (let k in this.selectedSkuPrice) {
					counter++;
				}
				if (counter != this.goodsSkuList.length) {
					this.$u.toast('请选择商品规格');
					return false
				}
				return true
			}
		}
	};
</script>

<style lang="scss">
	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;

		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}

		.back-hover {
			background-color: rgba(#fff, 0.18);
		}

		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}

	.combo {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
		padding: 20rpx;
		margin: 0 auto;

		.title-desc {
			font-weight: bold;
			padding: 20rpx 0;
		}

		.item {
			width: 25%;
			margin-right: 30rpx;
			display: inline-block;
			vertical-align: top;

			.img {
				display: inline-block;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 6rpx;
				}
			}

			.item-title {
				display: block;
				width: 90%;
				line-height: 40rpx;
				color: red;
			}

			.item-select {
				display: block;
				width: 100%;
				line-height: 40rpx;

				.text {
					overflow: hidden;
					width: 80%;
					display: inline-block;
				}
			}
		}
	}

	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}

	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;

		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}

					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		// 富文本
		.rich-box {
			/deep/ img {
				display: block;
			}
		}

		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;

					.cuIcon-right {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}

		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}

	// 标题卡片
	.title-box {
		background-color: #fff;

		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}

		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}

	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: 100rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display:flex;
		justify-content: space-between;

		
		
		.detail-left{
			padding:10rpx 20rpx;
			.comb-price{
				.unit{color:#ee0000;font-size:24rpx;font-weight:700;}
				.money{color:#ee0000;font-size:34rpx;font-weight:700}
			}
			.tips-price{font-size:20rpx;color:#999;padding:2rpx 0}
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, #dd0000, #FF0000);
			}

			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}

			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;

				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
	.size-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 20rpx 0;
		font-size: 28rpx;
	
		.title {
			color: #999;
			margin-right: 20rpx;
		}
	
		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}
	
	// 规格
	.shop-modal {
		width: 750rpx;
		height: 950rpx;
		background: rgba(255, 255, 255, 1);
		padding: 20rpx 20rpx 30rpx;
		// 商品卡片
		.top {
			margin: 30rpx 0;
			border-radius: 20rpx;
			padding: 20rpx;
	
			.shop-img {
				width: 160upx;
				height: 160upx;
				border-radius: 6upx;
				margin-right: 30upx;
				background: #ccc;
			}
	
			.goods-box {
				height: 160upx;
				width: 490rpx;
				align-items: flex-start;
	
				.goods-title {
					font-size: 28rpx;
	
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 42rpx;
					text-align: left;
				}
	
				.goods-bottom {
					width: 100%;
				}
	
				.price-box {
					font-size: 36upx;
	
					font-weight: bold;
					color: #e1212b;
	
					.unit {
						font-size: 24upx;
	
						font-weight: bold;
						color: #e1212b;
					}
				}
	
				.stock {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	
		// 规格选项
		.select-box {
			margin-bottom: 30rpx;
			.type-title {
				font-size: 26upx;
				font-weight: 400;
				margin-bottom: 20upx;
			}
			.tag-box {
				flex-wrap: wrap;
			}
			.tag {
				line-height: 62rpx;
				background: #f4f4f4;
				border-radius: 31rpx;
				font-size: 28upx;
				font-weight: 400;
				color: #666666;
				padding: 0 30upx;
				margin-bottom: 20rpx;
				margin-right: 10rpx;
			}
	
			.tag-active {
				background: linear-gradient(90deg, #dd0000, #FF0000);
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}
	
			.tag-disabled {
				background: #f8f8f8;
				color: #cacaca;
			}
		}
	
		.buy-num-box {
			.num-title {
				font-size: 26upx;
	
				font-weight: 400;
				margin-bottom: 20upx;
			}
		}
	}
	
	.btn-box {
		height: 100rpx;
	
		.cu-btn {
			width: 340rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			font-size: 28rpx;
	
			font-weight: 500;
			color: rgba(255, 255, 255, 0.9);
			padding: 0;
		}
	
		.cart-btn {
			background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
		}
	
		.buy-btn {
			background: linear-gradient(90deg, #dd0000, #FF0000);
		}
		.save-btn {
			width: 710rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #dd0000, #FF0000);
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
		}
		.cancel-btn {
			width: 710rpx;
			height: 70rpx;
			background: rgba(221, 221, 221, 1);
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			border-radius: 35rpx;
			padding: 0;
		}
	}
	
	
	.item-combo{
		margin:20rpx 0;
		display:block;
		overflow:hidden;
		border-bottom:1rpx solid #eee;
		padding-bottom:20rpx;
	}
	.pro-combo{		
		display:flex;
		.left{
			width:26vw;
			margin-right:20rpx;
			.img{
				width:26vw;
				height:20vw;
				border-radius:10rpx;
				overflow:hidden;
				image{
					max-width:100%;
					}
			}
		}
		
		.right{
			width:100%;
			
			.pro-title{font-size:28rpx;font-weight:700;line-height:180%;}
			.pro-price{font-size:24rpx;font-weight:700;padding:10rpx 0;color:#ee0000}
			.pro-num{font-size:24rpx;font-weight:normal;color:#999}
		
		}
	
	}
	
	
	.item-pro-select{
		border:1rpx solid #DD6161;
		border-radius:80rpx;
		padding:10rpx 20rpx;
		font-size:24rpx;
		color:#DD6161;
		display:flex;
		margin:20rpx 0;
		}
		
	.card-combo{
		border:1rpx solid #eee;
		padding:20rpx;
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-radius:10rpx;
		.left{
			margin-right:20rpx;
			.card-title{
				font-size:28rpx;
				font-weight:700;
				line-height:180%;
				
				}
			
		}
		.right{
			.card-money{
				font-size:30rpx;
				font-weight: 700;
				color:#dd0000;
				text-align: right;
			}
			.card-num{
				color:#666;
				font-size:24rpx;
				font-weight:normal;
				text-align: right;
				}	
			
		}
		
		}	
</style>
